<template>
    <view>
        <view>
            <image style="width: 100vw;" :src="importStaticFile('/images/login-bg.png')" mode="aspectFill">
            </image>
        </view>
        <view class="form">
            <u-form labelPosition="left" :model="modal" ref="loginForm" :borderBottom="false">
                <u-form-item label="" prop="loginForm.phone" borderBottom ref="phone" :borderBottom="false">
                    <u-input v-model="modal.loginForm.phone" prefixIcon="phone-fill" border="surround" placeholder="手机号"
                        maxlength="11" shape="circle" prefixIconStyle="font-size: 22px;color: #1A94BC"></u-input>
                </u-form-item>
                <u-form-item label="" prop="loginForm.code" borderBottom ref="item1" :borderBottom="false">
                    <u-input v-model="modal.loginForm.code" prefixIcon="email-fill" placeholder="验证码" border="surround"
                        shape="circle" prefixIconStyle="font-size: 22px;color: #1A94BC"></u-input>
                    <template #right>
                        <view style="margin-left:5px;">
                            <u-toast ref="uToast"></u-toast>
                            <u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
                            <u-text type="primary" :text="tips" @tap="getCode"></u-text>
                        </view>
                    </template>
                </u-form-item>
            </u-form>
            <view class="login_btn">
                <u-button type="primary" size="large" shape="circle" text="立即登录" @tap="login"></u-button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { getCodeApi, loginByPhone } from '@/api/login'
import { importStaticFile } from '@/utils/common'
const modal = reactive({
    loginForm: {
        phone: '',
        code: ''
    }
})
const tips = ref('')
const seconds = ref(60)
const { proxy } = getCurrentInstance()
const codeChange = (text) => {
    tips.value = text;
}
const getCode = () => {
    if (!modal.loginForm.phone || !(/^1[3-9]\d{9}$/.test(modal.loginForm.phone))) return uni.$u.toast('请输入正确的手机号')
    // getCodeApi(loginForm).then(res => {
    // })
    if (proxy.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
            title: '正在获取验证码'
        })
        getCodeApi(modal.loginForm).then(res => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            proxy.$refs.uCode.start();
        })
    }
}
const login = () => {
    if (!modal.loginForm.phone || !(/^1[3-9]\d{9}$/.test(modal.loginForm.phone))) return uni.$u.toast('请输入正确的手机号')
    if (modal.loginForm.code.length != 6) return uni.$u.toast('请输入正确的验证码')
    const params = {
        productType: 'HJD',
        productId: '401',
        ...modal.loginForm
    }
    loginByPhone(params).then(res => {
        uni.setStorageSync('token', res.wxToken)
        uni.setStorageSync('phone', res.data.userName)
        uni.showToast({
            title: '登陆成功',
            icon: 'none',
        });
        setTimeout(() => {
            uni.$u.route({
                url: '/pages/entry/index',
                type: 'tab'
            })
        }, 1500);
    })

}
</script>

<style lang='scss' scoped>
.form {
    padding: 20px
}

.login_btn {
    margin-top: 30px;
}
</style>